<!-- 审批人新增 -->

<template>
  <div>
    <div class="flexCC" @click="toOpen"><i class="el-icon-plus" /></div>

    <EasyModal v-model="easyVisible" title="选择审批人" medium @submit="toSubmit">
      <el-form ref="form" :model="obj" labelWidth="90px">
        <FormRadio
          :one="obj"
          label="审批方式"
          bind="approveType"
          :dict="DICT.AUDIT_TYPE"
          required
          @change="changeType"
        />
        <FormRadio
          :one="obj"
          label="审批人"
          bind="approverSource"
          :dict="DICT.USER_SOURCE"
          :disabled="!hasAudit"
          :required="hasAudit"
          @change="changeSource"
        />
        <FormSlot :one="obj" label="指定人员" bind="user" :required="hasUser">
          <ChooseUserOne :obj="obj" bind="user" :disabled="!hasUser" />
        </FormSlot>
      </el-form>
    </EasyModal>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const EMPTY = { approveType: 1, approverSource: 1, user: {} }

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'UserAdd',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      easyVisible: false, // 弹窗是否可见
      obj: CORE.clone(EMPTY), // 数据对象
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 有无审批
     */
    hasAudit() {
      return this.obj.approveType === 1
    },

    /**
     * 有无指定人员
     */
    hasUser() {
      return this.hasAudit && this.obj.approverSource === 1
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听弹窗可见
     */
    easyVisible(visible) {
      visible && this.toReset()
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 弹窗
     */
    toOpen() {
      this.easyVisible = true
    },

    /**
     * 切换审批方式
     */
    changeType(type) {
      const approverSource = type === 1 ? 1 : undefined
      this.obj = { approveType: type, approverSource, user: {} }
    },

    /**
     * 切换审批人来源
     */
    changeSource() {
      this.obj = { ...this.obj, user: {} }
    },

    /**
     * 提交
     */
    toSubmit() {
      const { obj: { approveType, approverSource, user }, hasUser } = this

      if (hasUser && CORE.isEmpty(user)) {
        CORE.MSG.warning('请选择指定人员')
        return
      }

      this.one.approvers.push({
        time: Date.now(),
        approveType,
        approverSource,
        approverUaaUserId: hasUser ? user.uaaUserId : '',
        approverUserName: hasUser ? user.name : '',
        approverUserPhone: hasUser ? user.phone : '',
      })

      this.easyVisible = false
    },

    /**
     * 重置
     */
    toReset() {
      this.obj = CORE.clone(EMPTY) // 清除选中
    },
  },
}
</script>
